<template>
	<div>
		<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"><div class="ball" v-show="ballFlag" ref="ball"></div></transition>
		<!-- <div class="ball" v-show="ballFlag" ref="ball"></div> -->
		 <swiper :tupian="tupian" :isfull="true"></swiper> 
		 <div class="title"></div>
		 <div class="mui-card">
		 	<div class="mui-card-header">{{ goodsinfo.title }}</div>
		 	<div class="mui-card-content">
		 		<div class="mui-card-content-inner">
		 			<p class="price">
		 				市场价:
		 				<del>￥{{ goodsinfo.shichangjia }}</del>
		 				&nbsp;&nbsp;销售价:
		 				<span class="now_price">￥{{ goodsinfo.xiaoshoujia }}</span>
		 			</p>
		 			<p>
		 				购买数量:
		 				<numbox @count="getSelectedCount" :kucun="goodsinfo.num"></numbox>
		 			</p>
		 			<p>
		 				<mt-button type="primary" size="small" @click="userFavorites">商品加入收藏夹</mt-button>
		 				<mt-button type="primary" size="small" @click="addToShopCar">加入购物车</mt-button>
		 			</p>
		 		</div>
		 	</div>
		 </div>
		 <!-- 商品参数区域 -->
		 	<div class="mui-card">
		 		<div class="mui-card-header">商品参数</div>
		 		<div class="mui-card-content">
		 			<div class="mui-card-content-inner">
		 				<p>商品货号: {{ goodsinfo.shangpinhuohao }}</p>
		 				<p>库存情况: {{ goodsinfo.num }}</p>
		 				<p>上架时间: {{ goodsinfo.add_time | dateFormat }}</p>
		 			</div>
		 		</div>
		 		<div class="mui-card-footer">
		 			<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
		 			<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
		 		</div>
		 	</div>
		 </div>
	</div>
</template>

<script>
	import swiper from '../subcomponent/swiper.vue'
	import numbox from '../subcomponent/goodsinfo_numbox.vue';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				id:this.$route.path.substr(16,1),
				tupian:[],
				goodsinfo:[],
				ballFlag: false,
				selectedCount: 1
			}
		},
		created() {
			this.gettupian()
			this.getGoodsInfo()
		},
		methods:{
			gettupian(){
				this.$http.get('src/data/container/container'+ this.id+'.json').then(result => {
				if (result.body.status === 0) {
					this.tupian = result.body.message;
				}
			});
			},
			getGoodsInfo() {
				this.$http.get('src/data/goodsinfo/goodsinfo' + this.id+'.json').then(result => {
					if (result.body.status === 0) {
						this.goodsinfo = result.body.message[0];
					}
				});
			},
			goDesc(id) {
				//点击使用编程时导航跳转到图文介绍
				this.$router.push({ name: 'infodesc', params: { id } });
			},
			goComment(id) {
				// 点击跳转到 评论页面
				this.$router.push({ name: 'infocomment', params: { id } });
			},
			addToShopCar() {
				this.ballFlag = !this.ballFlag;
				// { id: 商品id,count:商品数量,price: 商品价格,selected:false }
				// 拼接出一个，要保存到store中car 数组里的 商品信息对象
				var goodsinfo = { 
					id: this.id, 
					count: this.selectedCount,
					price: this.goodsinfo.xiaoshoujia, 
					img_url: this.tupian[0].img,
					selected: true,
					};
					this.$store.commit("addToCar",goodsinfo)
			},
			beforeEnter(el) {
				el.style.transform = 'translate(0,0)';
			},
			enter(el, done) {
				//这个没什么用，但不加没有动画
				el.offsetWidth;
				//小球动画优化思路
				// 1.先分析导致动画不准确的本质原因；因为我们把小球最终位移到的位置，已经局限在某一分辨率下
				// 滚动条为滚动的情况下
				// 2.只要分辨率和测试的时候不一样，或者，滚动条有一定的滚动距离之后，问题就出来了
				// 3. 因此，我们经过分析得到结论：不能把位置的横纵坐标直接写死，而是应该根据不同情况
				// ，动态计算这个坐标值
				// 4. 经过分析 得出解题思路：先得到徽标的横纵坐标 再得到小球的横纵坐标，然后让y值求差
				// ,x值也求差，得到的结果，就是横纵坐标要唯一的距离
				// 5.如何获取徽标和小球的位置？？？ domObject.getBoundingClientRect()
			
				// 获取小球在页面中的位置
				// ref 用来获取dom元素
				// const ballPosition = this.$refs.ball.getBoundingClientRect()
				const ballPosition = el.getBoundingClientRect();
				const badgePosition = document.getElementById('badge').getBoundingClientRect();
				const xDist = badgePosition.left - ballPosition.left;
				const yDist = badgePosition.top - ballPosition.top;
				console.log(yDist);
				el.style.transform = `translate(${xDist}px,${yDist}px) `;
				el.style.transition = 'all 1s cubic-bezier(.28,-0.22,1,.58)';
				done();
			},
			afterEnter(el) {
				this.ballFlag = !this.ballFlag;
			},
			getSelectedCount(count) {
				// 当子组件把选中的数量传递给父组件的时候，把选中的值保存到data上
				this.selectedCount = count;
			
				console.log(count);
			},
			//商品加入收藏夹
			/* async */ userFavorites(){
				var id = this.$store.state.userId
				console.log(this.tupian[0].img)
				 /* if(!id) {
					this.$store.commit('updateUserId')
				} */ 
				/* await */ 
				this.$http.post('http://127.0.0.1:8080/list',
				{ids:id,title: this.goodsinfo.title,
				tupian: this.tupian[0].img,
				shangpinlujing:this.$route.fullPath}).then(result => {
					console.log(result.body.message)
					Toast(result.body.message)
				})
			}
			
		},
		components:{
			swiper,
			numbox
		}
	}
</script>

<style lang="scss" scoped>
	.ball {
		width: 0.9375rem;
		height: 0.9375rem;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		z-index: 9999;
		top:29.375rem;
		left: 8.75rem;
	}
</style>
